<template>
    <!-- <div class="loginheader">
        <div class="bajingtu"></div>
    </div> -->

    <!-- 登录模块 -->
    <!-- <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        v-if="OperationType === '登录'"
    >
        <el-form-item prop="userName">
            <el-input
                v-model.trim="ruleForm.userName"
                type="text"
                autocomplete="on"
                :prefix-icon="Avatar"
                :readonly="loading"
                placeholder="请输入账户"
                @keyup.enter="submitForm(ruleFormRef)"
            />
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                v-model.trim="ruleForm.password"
                type="password"
                autocomplete="on"
                :prefix-icon="Lock"
                :readonly="loading"
                placeholder="请输入密码"
                show-password
                @keyup.enter="submitForm(ruleFormRef)"
            />
        </el-form-item>
        <el-form-item>
            <div class="wangjimimaya">
                <div
                    style="display: flex; align-items: center; margin-right: 15px"
                    @click="OperationType = '注册'"
                >
                    <el-icon style="margin-right: 1px"><User /></el-icon>免费注册
                </div>
                <div
                    style="display: flex; align-items: center; margin-right: 15px"
                    @click="OperationType = '修改密码'"
                >
                    <el-icon style="margin-right: 1px"> <Unlock /></el-icon>忘记密码
                </div>
                <div
                    style="display: flex; align-items: center"
                    @click="OperationType = '验证码登录'"
                >
                    <el-icon style="margin-right: 1px"><Iphone /></el-icon>验证码登录
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="submitForm(ruleFormRef)"
                style="width: 100%"
                icon="UserFilled"
                :loading="loading"
                >登 录</el-button
            >
        </el-form-item>
    </el-form> -->

    <!-- 注册、修改密码模块 -->
    <!-- <el-form
        ref="ruleFormRef"
        v-if="['注册', '修改密码', '验证码登录'].includes(OperationType)"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
    >
        <el-form-item prop="userName">
            <el-input
                v-model.trim="ruleForm.userName"
                type="text"
                autocomplete="on"
                :prefix-icon="Avatar"
                :readonly="loading"
                placeholder="请输入账户"
                @keyup.enter="submitForm(ruleFormRef)"
            />
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                v-model.trim="ruleForm.password"
                type="password"
                autocomplete="on"
                :prefix-icon="Lock"
                :readonly="loading"
                placeholder="请输入密码"
                show-password
                @keyup.enter="submitForm(ruleFormRef)"
            />
        </el-form-item>
        <el-form-item prop="MobileCode">
            <div class="btndeclass">
                <el-input
                    v-model.trim="ruleForm.MobileCode"
                    type="text"
                    autocomplete="off"
                    :prefix-icon="Iphone"
                    maxlength="6"
                    :readonly="loading"
                    placeholder="请输入手机验证码"
                    style="width: calc(100% - 160px)"
                />
                <el-button
                    @click="timercFunc()"
                    type="primary"
                    style="width: 140px"
                    :disabled="timerb !== 60 || loading"
                    :loading="loading"
                    icon="Iphone"
                    >获取验证码{{ timerb !== 60 ? `(${timerb})` : "" }}</el-button
                >
            </div>
        </el-form-item>
        <el-form-item>
            <div class="btndeclass">
                <el-button
                    type="primary"
                    @click="submitForm(ruleFormRef)"
                    style="width: 48%"
                    icon="UserFilled"
                    :loading="loading"
                    >完成{{ OperationType }}并登录</el-button
                >
                <el-button
                    type="primary"
                    @click="OperationType = '登录'"
                    style="width: 48%"
                    icon="Back"
                    :loading="loading"
                    >返回登录</el-button
                >
            </div>
        </el-form-item>
    </el-form> -->
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { Avatar, Lock, Iphone } from "@element-plus/icons-vue";
import { GetRouteParameters } from "./index";

// 操作类型
const OperationType = ref("登录");

// 登录
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    userName: "",
    password: "",
    MobileCode: "",
});
const rules = reactive({
    userName: [{ message: "请输入账户", trigger: "blur", required: true }],
    password: [{ message: "请输入密码", trigger: "blur", required: true }],
    MobileCode: [{ message: "请输入6位数验证码", trigger: "blur", required: true }],
});
const loading = ref(false);
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            loading.value = true;
            setTimeout(() => {
                loading.value = false;
            }, 1000);
            const obj = {
                userName: ruleForm.userName,
                password: ruleForm.password,
            };
            if (OperationType.value === "登录") {
            } else if (OperationType.value === "修改密码") {
                obj.MobileCode = ruleForm.MobileCode;
            } else if (OperationType.value === "注册") {
                obj.MobileCode = ruleForm.MobileCode;
            }
        }
    });
};

// 获取验证码倒计时
const timerb = ref(60);
const timercFunc = () => {
    let timerc = setInterval(() => {
        timerb.value -= 1;
        if (timerb.value === 0) {
            timerb.value = 60;
            //完成后清空定时器
            clearInterval(timerc);
        }
    }, 1000);
};
</script>
<style scoped lang="scss" src="./index.scss"></style>
